<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>心形</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <style>
        /* 小屏幕手机端 */
        @media (min-width: 0px) and (max-width:768px) {
            .div1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        }

        /* 中等屏幕（桌面显示器，大于等于 992px） */
        @media (min-width: 768px) and (max-width:992px){
            .div1{
                width: 300px;
                height: 300px;
                background-color: blue;
            }
        }

        /* 大屏幕（大桌面显示器，大于等于 1200px） */
        @media (min-width: 992px) {
            .div1{
                width: 500px;
                height: 500px;
                background-color: aqua;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div id="Box">
        <el-input v-model="input" style="width: 290px" placeholder="请输入名字"></el-input><el-button @click="tiao()" type="success">确定</el-button>
    </div>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            //登录的表单对象
            input:'',
            //登录的规则

        },
        methods:{
            tiao(){
                axios.post("/name/name?name="+this.input).then(result => {
                    var a=this.input
                    window.location.href=`/demo.html?${a}`
                })

            }

        }
    })
</script>

<style>
    #Box{
        width: 450px;
        height: 300px;
        margin: 200px auto;

    }
</style>
</html>
